<template>
  <audio ref="audioRef1" :src="voice1" class="audio-box" controls></audio>
  <audio ref="audioRef2" :src="voice2" class="audio-box" controls></audio>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import voice1 from "@/assets/images/vioce/1.mp3";
import voice2 from "@/assets/images/vioce/2.mp3";
const audioRef1 = ref<HTMLAudioElement | null>(null);
const audioRef2 = ref<HTMLAudioElement | null>(null);
const playFun = (src:number = 0) =>{
  if(src === 0 && audioRef2.value){
    audioRef2.value.play();
  }else  if(src !== 0 && audioRef1.value){
    audioRef1.value.play();
  }
  
}
defineExpose({
  playFun
})
</script>
<style lang="scss" scoped>
  .audio-box{display: none;}
</style>